@charset "utf-8";
$fs:64px;

html{
    font-size: $fs;
}
@function r($px){
    @return $px/$fs*1rem
}
//登录弹窗
#check{
    display: none;
}
#check:checked ~ .loginBox{
    transform: translateX(0);
}
#check:checked ~ .web{
    display: none;
}
.loginBox{
    z-index: 2;
    width: 100%;
    height: 100%;
    background: #21201c;
    position: absolute;
    top: 0;
    transform: translateX(-100%);
    transition: 0.5s;
    .back{
        position: absolute;
        margin-top: r(20px);
        margin-left: r(10px);
        display: block;
        width: r(43px);
        height: r(43px);
        background: #b60005;
        color: #fff;
        font-size: r(40px);
        text-align: center;
//      margin-top: r(10);
        border-radius: 50%;
    }
    .s_line{
            border: 1px solid #454545;
            margin-top: r(80px);
            margin-left: r(14px);
            margin-right: r(14px);
    }
    .percen{
        padding-top: r(70px);
        padding-bottom: r(120px);
        width: 100%;
        text-align: center;
        border-bottom: r(24px) solid #2c2c2c;
        .port{
            width:r(130px);
            height: r(130px);
            margin: r(32px) auto;
            margin-bottom: r(14px);
            position: relative;
            .pic_port{
                width: 100%;
                height: 100%;
                position: relative;
                overflow: hidden;
                img{
                width: r(130px);
                height: r(130px);
                }
            }
            a{
                position: relative;
            }
            .ljdl{
                font-size:r(24.86px) ;
                color: white;
                font-family: "宋体";
                cursor: pointer;
                top: r(-20px);
                bottom: 0;
            }
            .ljdl2{
                display: block;
                font-size: r(19.53px);
                color: #3a3939;
                font-family: "宋体";
                bottom:r(20px) ;
                text-decoration:underline;
            }
        }
    }
    .sort_pro{
        margin: 0 r(30px);
        #huan{
            display:none;
        }
        #huan:checked~.gimc1{
            height:r(236px) ;
        }
        
        #huan:checked~.gimc1 .l_span{
            transform:rotate(90deg) ;
        }
        .gimc{
            width: 100%;
            display: block;
            position: relative;
            border-bottom: 1px solid #2C2C2C;
            cursor: pointer;
            height: r(68px);
            overflow: hidden;
            p{
                font-size: r(23.08px);
                color: #7d7d7d;
                line-height: r(40px);
                margin-top: r(28px);
            }
            span{
                display: block;
                position: absolute;
                top:r(30px);
                right: 0;
                width: r(20px);
                height: r(20px);
                img{
                    height: 100%;
                    margin-bottom: r(60px);
                }
            }
            .drop_down{
                .line{
                    border-bottom: r(2px) solid #2e2d2d;
                }
                a{
                    font-size: r(21.31px);
                    margin: r(17px) r(59px);
                    text-align: center;
                    color: #FFFFFF;
                    display: block;
                    cursor: pointer;
                }
            }
        }
    }
}
#pop{
    display: none;
}
#pop:checked ~.denglu{
    transform: translateY(0);
}
.denglu{
    height: 100%;
    width:100% ;
    background: #222222;
    position: absolute;
    top:0;
    transform: translateX(-100%);
    z-index: 2;
//  transition: 0.5s;
    .logo_common{
        width: r(240px);
        height: r(198px);
        background: url(../img/toubu.png) no-repeat center center;
        background-size: 90%;
        margin: r(60px) auto;
    }
    .tel{
        width: 80%;
        margin: 0 auto;
        margin-bottom:r(32px) ;
        .bg{
            width: 20%;
            height: r(78px);
            background:#303030 ;
            .rentou{
                margin: 0 auto;
                width: r(90px);
                height: r(78px);
                background: url(../img/ren.png) no-repeat center center;
                background-size:50% ;
                background-color: #303030;
            }
        }
            .shuru{
                width: 80%;
                height: r(78px);
                background: #3d3d3d;
                text-align: center;
                overflow: hidden;
                input[type="text"]{
                    float: left;
                    width: 80%;
                    height: 100%;
                    border: none;
                    font-size:r(20px) ;
                    color: #CDCDCD;
                    background: none;
                }
            }
    }
   .password{
       width: 80%;
       margin: 0 auto;
       .bg{
            width: 20%;
            height: r(78px);
            background:#303030 ;
            .mima{
                margin: 0 auto;
                width: r(90px);
                height: r(78px);
                background: url(../img/suo.png) no-repeat center center;
                background-size:50% ;
                background-color: #303030;
            }
       }
    .shuru{
        width: 80%;
        height: r(78px);
        background: #3d3d3d;
        text-align: center;
        overflow: hidden;
        input[type="text"]{
              float: left;
              width: 80%;
              height: 100%;
              border: none;
              font-size:r(20px) ;
              color: #CDCDCD;
              background: none;
            }
        }
   }
  .frget{
      width: 80%;
      height: r(42px);
      margin: 0 auto;
      margin-top: r(24px);
      position: relative;
      .wjmm{
          position: absolute;
          right: 0;
          display: block;
          width: r(160px);
          cursor: pointer;
          overflow: hidden;
          .wenh{
              width: r(20px);
              height: r(20px);
              line-height: r(10px);
              margin: auto 0;
              float: left;
              font-size: r(20px);
//            margin-top: r(5px);
              img{
                  width: 100%;
              }
          }
          p{
              font-size: r(19.53px);
              color:white;
              float: left;
          }
      }
  } 
  span{
      padding-top:r(22px) ;
      display: block;
      width: r(480px);
      height: r(78px);
      margin: 0 auto;
      margin-top: r(54px);
      font-size: r(23.08px);
      color: #CDCDCD;
      text-align:center;
  }
   .dlu{
       background:#B60005;
   }
   .zce{
       width: r(480px);
       height: r(78px);
       background: #303030;
       margin-top: r(28px);
       border: r(2px) solid #B60005;
   }
}
#geren{
      display: none;
}
#geren:checked~.personal{
    transform: translateX(0)
}
.personal{
         width: 100%;
         background: #222222;
         position: absolute;
         top:0;
         transform: translateX(-100%);
         z-index: 2;
         .tiao{
              border: r(20px) solid #1e1d1d;
         }
         .bufen{
             height:100%;
             margin-top: r(100px);
             text-align:center ;
//           border-bottom: r(24) solid #2c2c2c;
             .toux{
                 width: r(150px);
                 height: r(150px);
                 margin: r(32px) auto;
                 margin-bottom: r(14px);
                 border-radius:50% ;
                 background: #FFFFFF;
                 position: relative;
                 background-size:100% ;
                 .toux1{
                     width: 100%;
                     height: 100%;
                     border-radius: 50%;
                     position: relative;
                     overflow: hidden;
                 }
                 img{
                     width: 100%;
                 }
                 .toux11{
                     width: r(54px);
                     height: r(54px);
                     border-radius:50% ;
                     background:#FF0000 ;
                     left: r(108px);
                     bottom: r(108px);
                     color: #FFFFFF;
                     font-size: r(40px);
                     line-height: r(50px);
                     text-align: center;
                     position: absolute;
                 }
             }
             .bufen2{
                 width: 90%;
                 margin: 0 auto;
                 .ming{
                     float: left;
                     margin-left: r(200px);
                     margin-top: r(10px);
                     font-size: r(24.86px);
                     font-weight: 100;
                     color: #FFFFFF;
                     vertical-align: middle;
                 }
                 .renx{
                     float: right;
                     margin-right:r(160px) ;
                     margin-top: r(10px);
                     width: r(120px);
                     height: r(30px);
                     border: r(2px) solid #FFFFFF;
                     background: none;
                     font-size: r(20px);
                     color: #FFFFFF;
                     vertical-align: middle;
                 }
             }
             .bufen3{
                 width: 20%;
                 font-size: r(30px);
                 margin: 0 auto;
                 .xing3{
                     margin-left: r(10px);
                     width: r(21px);
                     height: r(21px);
                     background-size:100% ;
                     float: left;
                     img{
                         height: 100%;
                     }
                 }
             }
             .bufen4{
                 font-size: r(24px);
                 color: #D4D4D4;
                 margin-top: r(10px);
                 a{
                     color: #AF0206;
                 }
             }
             .shoucan{
                 background: #B60005;
             }
             .fabu{
                 background: #CDCDCD;
             }
             button{
                 width: r(240px);
                 height: r(52px);
                 border: none;
                 border-radius: r(26px);
                 color: #FFFFFF;
                 font-size: r(23.08px);
                 margin-top: r(20px);
                 margin-bottom: r(20px);
             }
         .cuxian{
             border-bottom: r(30px) solid #303030;
         }
      } 
         .sort_pro1{
        margin: 0 r(30px);
        #huang{
            display:none;
        }
        #huang:checked~.gimc2{
            height:r(236px) ;
        }
        
        #huang:checked~.gimc2 .l_span1{
            transform:rotate(90deg) ;
        }
        .gimcc{
            width: 100%;
            display: block;
            position: relative;
            border-bottom: r(2px) solid #2C2C2C;
            cursor: pointer;
            height: r(68px);
            overflow: hidden;
            p{
                font-size: r(23.08px);
                color: #7d7d7d;
                line-height: r(40px);
                margin-top: r(28px);
            }
            span{
                display: block;
                position: absolute;
                top:r(30px);
                right: 0;
                width: r(20px);
                height: r(20px);
                img{
                    height: 100%;
                    margin-bottom: r(60px);
                }
            }
            .drop_down1{
                .line1{
                    border-bottom: r(2px) solid #2e2d2d;
                }
                a{
                    font-size: r(21.31px);
                    margin: r(17px) r(59px);
                    text-align: center;
                    color: #FFFFFF;
                    display: block;
                    cursor: pointer;
                }
            }
        }
    }
    .exit2{
        width: r(160px);
        height: r(50px);
        margin: r(42px) auto;
        margin-bottom: 0;
        text-align: center;
        font-size: r(23.08px);
        background: #B60005;
        border-radius:r(24px) ;
        color: #FFFFFF;
        padding-top: r(10px);
    }   
}  
#jp{
    display: none;
}
#jp:checked~.jianpan{
    transform: translateY(0);
} 
#jp:checked ~ .web{
    display: none;
}
.jianpan{
    z-index: 2;
    height: 100%;
    width:100% ;
    background: #F1F1F1;
    position: absolute;
    top:0;
    transform: translateY(-100%);
    transition: 0.5s;
    .s_top{
       height: r(86px); 
       background: #1D1D1D !important;
        .back1{
            position: absolute;
            margin-top: r(20px);
            margin-left: r(10px);
            display: block;
            width: r(43px);
            height: r(43px);
            background: #b60005;
            color: #fff;
            font-size: r(40px);
            text-align: center;
    //      margin-top: r(10);
            border-radius: 50%;
        }
        .Search_bar1{
            position: absolute;
            width: r(500px);
            height: r(50px);
            left: r(100px);
            border: 1px solid white;
            border-radius: r(22px);
            margin: 0 auto;
            margin-top: r(16px);
            input[type="text"]{
//              float: right;
                font-size: r(26.86px);
                margin-top: r(-36px);
                width: r(420px);
                height: r(40px);
                vertical-align: middle;
                background: #21201c;
                border: none;
                margin-right: r(10px);
                
            }
            input[type="image"]{
                float: left;
                width: r(36px);
                height: r(34px);
                margin-top: r(6px);
                margin-left: r(10px);
                vertical-align: middle;
                background: #21201c;
            }
        }
    }
    .s_keyword{
        margin: r(32px) r(30px);
        margin-right: 0;
        h1{
            font-size: r(26.63px);
            margin-bottom: r(16px);
        }
        .keyword:hover{
            color: white;
            background: #FF0000;
        }
        .keyword{
            margin-right: r(8px);
            margin-bottom: r(10px);
            border: r(2px) solid #E4E4E4;
            display: block;
            background: white;
            font-size: r(29.23px);
            padding: r(12px) r(18px);
            color: #8B8B8B;
            float: left;
        }
    }
}